<!DOCTYPE html>
<html>
<head>
    <title>Ionization Energies</title>
</head>
<body>
    <canvas id="atomicTableCanvas" width="550" height="300"></canvas>
    <script>
        const canvas = document.getElementById('atomicTableCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        const baseFont = "'Times New Roman', serif";
        const headerSize = 40;
        const bodySize = 40;
        const subscriptSize = 25;
        const textColor = 'black';

        // Column and Row positions
        const xCol1 = 80;
        const xCol2 = 230;
        const xCol3 = 400;

        const yHeader = 60;
        const yRow1 = 130;
        const yRow2 = 200;
        const yRow3 = 270;

        ctx.fillStyle = textColor;
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'left';

        // --- Draw Headers ---
        // Z
        ctx.font = `italic ${headerSize}px ${baseFont}`;
        ctx.fillText('Z', xCol1, yHeader);

        // Element
        ctx.font = `${headerSize}px ${baseFont}`;
        ctx.fillText('Element', xCol2, yHeader);

        // E_I
        ctx.font = `italic ${headerSize}px ${baseFont}`;
        ctx.fillText('E', xCol3, yHeader);
        const E_width = ctx.measureText('E').width;
        ctx.font = `italic ${subscriptSize}px ${baseFont}`;
        ctx.fillText('I', xCol3 + E_width, yHeader + 10);

        // --- Draw Data Rows ---
        ctx.font = `${bodySize}px ${baseFont}`;

        // Row 1: Hydrogen
        ctx.fillText('1', xCol1, yRow1);
        ctx.fillText('H', xCol2, yRow1);
        ctx.fillText('13.6 eV', xCol3, yRow1);

        // Row 2: Helium
        ctx.fillText('2', xCol1, yRow2);
        ctx.fillText('He', xCol2, yRow2);
        ctx.fillText('24.6 eV', xCol3, yRow2);

        // Row 3: Lithium
        ctx.fillText('3', xCol1, yRow3);
        ctx.fillText('Li', xCol2, yRow3);
        ctx.fillText('5.4 eV', xCol3, yRow3);

    </script>
</body>
</html>